<!--
 * @Author: your name
 * @Date: 2021-08-13 09:40:34
 * @LastEditTime: 2021-08-13 10:55:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day10\01-容器.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器</title>
    <style>
        body>div{
            background-color: cyan;
        }
        body>div>div{
            border:10px solid red;
            flex:400px;
            /* width:400px; */
        }
        body>.one>div{
            /* 固定宽度200px; */
            width:200px;
            /* .one 列布局，40px代表高度 */
            flex:40px;
        }
        .one{
            /* 默认的flex-direction:row； 行排列 列布局 默认justify-content:flex-start;flex-wrap:nowrap;属性 */
            display:flex;
            /* 自动换行 达到了最小宽度，放不下了 */
            /* flex-wrap:wrap; */
            /* flex-direction:column;和flex-wrap:wrap;的缩写方式 */
            flex-flow:column wrap;
        }
        .two{
            display:flex;
            /* 行的顺序发生改变 */
            flex-flow:row wrap-reverse;
            /* 上下没有，左右有间隙 左右间隙想加 */
            /* justify-content: space-around; */
            /* 两端对齐，中间间隙平均分配 */
            justify-content: space-between;
            /* 默认在交叉轴对齐方式拉伸 */
            align-items: stretch;
            padding:0 20px;
        }
        .two>div{
            /* flex:400px; */
            width:100px;
        }
        .three{
             display:flex;
        }
        .three>div{
            flex:1;
        }
    </style>
</head>
<body>
    <div class="one">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        
    </div>
    <div class="two">
        <div>1</div>
        <div>2<br>2222<br>66666666666666666</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8<br>88</div>
        </div>
        <div class="three">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            
        </div>
       
    
</body>
</html>